STR:

1. Load this data URI:

data:text/html,<div style="float:left">hhh</div><div style="display:flow-root;writing-mode:vertical-rl">vvv

ACTUAL RESULTS:
"vvv" gets pushed down below the floated "hhh" (clearing the float).

EXPECTED RESULTS:
"vvv" should probably be to the right of "hhh". It doesn't need to clear the float; it doesn't need very much horizontal space, since it's only ~1em wide and can easily fit alongside "hhh".

If I give the "vvv" div a specified width (within reason, i.e. small enough to fit in the viewport), then it moves up to be on the right side of hhh. It's only when it has an auto width that we push it down to its own line.

(We probably behave as we do because, for the vertical-WM element, an 'auto' width is unresolvable without actually fully laying out its contents, and we haven't done that yet at the point where we're deciding where it will go with respect to potentially-colliding floats. So, we might assume the worst and push it down, to avoid collisions.)

Current Chrome and Safari give EXPECTED RESULTS here. Firefox gives ACTUAL RESULTS.

(In reply to Daniel Holbert [:dholbert] from comment #0)

If I give the "vvv" div a specified width (within reason, i.e. small enough to fit in the viewport), then it moves up to be on the right side of hhh. It's only when it has an auto width that we push it down to its own line.

To illustrate this: here's a sort-of reference case where I'm specifying a width of 1.2em (not a perfect reference case since this isn't the exact line-height of vvv in comment 0, but it's in the ballpark):

data:text/html,<div style="float:left">hhh</div><div style="display:flow-root;writing-mode:vertical-rl; width: 1.2em">vvv

This version gives EXPECTED RESULTS -- "vvv" ends up to the right of "hhh".

I think I am experiencing the same bug with inline-flex elements.

data:text/html,<div style="display:inline-flex;border:2px solid"><div style="border:2px dotted;writing-mode:vertical-rl">Hello world</div></div>

In Chrome and Safari the inner div is contained in the outer div. In Firefox the outer div's width collapses to almost 0, and the inner div overflows.

Comment 2 is actually more directly bug 1310551 - it's similar to attachment 8948727 [details] there.

I am having this same issue. Is there a workaround for this? If you inspect the "hello world" div and you un-check and re-check the "border: 2px dotted" property it works. My guess is because the width has been already calculated.

The example in comment 2 now works as expected (fixed by bug 1954762), but the original testcase here (comment 0) about float clearance is still an issue.

I'm dup'ing this forward to bug 1840782, which is the same problem and includes reference to an affected WPT as well as a reduced testcase.